<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>淘宝网 - 淘！我喜欢</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/header.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header height="88px">
            <a href="index_bak.html" id="logo-link">
                <img src="imgs/logo-login.png" alt="">
            </a>
        </el-header>
        <el-main>
            <el-image style="width: 100%; height: 600px"
                      src="https://gtms01.alicdn.com/tps/i1/TB1GTCYLXXXXXcHXpXXcoeQ2VXX-2500-600.jpg"
                      fit="cover"></el-image>
            <div class="login-input">
                <el-menu default-active="1" class="login-switch" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1">密码登录</el-menu-item>
                    <el-menu-item index="2">短信登录</el-menu-item>
                </el-menu>
                <div class="login-form">
                    <!--账号密码登录-->
                    <el-form label-width="40px" class="demo-ruleForm" v-show="isPasswordLogin">
                        <span class="input-icon"><i class="el-icon-user"></i></span>
                        <el-form-item prop="username">
                            <el-input v-model="username" type="text" placeholder="账号名/邮箱/手机号"></el-input>
                        </el-form-item>
                        <span class="input-icon"><i class="el-icon-lock"></i></span>
                        <el-form-item prop="password">
                            <el-input v-model="password" type="password" placeholder="请输入登录密码"></el-input>
                        </el-form-item>
                    </el-form>
                    <!--短信登录-->
                    <el-form label-width="40px" class="demo-ruleForm" v-show="!isPasswordLogin">
                        <span class="input-icon"><i class="el-icon-mobile-phone"></i></span>
                        <el-form-item prop="username">
                            <el-input v-model="username" type="text" placeholder="请输入手机号" id="phone"></el-input>

                            <template>
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                            v-for="item in cities"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        <span >{{ item.label }}</span>
                                        <span >{{ item.value }}</span>
                                    </el-option>
                                </el-select>
                                <img id="phone_icon"  src="https://gw.alicdn.com/tfs/TB1.8ugw.T1gK0jSZFrXXcNCXXa-200-200.png" alt="">
                            </template>

                        </el-form-item>
                        <span class="input-icon"><i class="el-icon-message"></i></span>
                        <el-form-item prop="password">
                            <el-input v-model="password" type="text" placeholder="请输入验证码" id="code"></el-input>
                            <span id="getCode">
                            <a href="" >获取验证码</a>
                            </span>
                        </el-form-item>
                    </el-form>

                    <el-button type="danger">登录</el-button>
                    <div class="sns-login-links">
                        <a href=""><img src="./imgs/weibo.png" height="15" alt=""> 微博登录</a>
                        <a href=""><img src="./imgs/zhifupingtai-zhifubao.png" height="18" alt=""> 支付宝登录</a>
                    </div>
                    <div class="login-links">
                        <a href="" v-show="isPasswordLogin">忘记密码</a>
                        <a href="" v-show="isPasswordLogin">忘记账户名</a>
                        <a href="">免费注册</a>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer>
            <div class="footer-hd">
                <p>
                    <a href="//page.1688.com/shtml/about/ali_group1.shtml">阿里巴巴集团</a>
                    <b>|</b>
                    <a href="//www.alibaba.com">阿里巴巴国际站</a>
                    <b>|</b>
                    <a href="//www.1688.com">阿里巴巴中国站</a>
                    <b>|</b>
                    <a href="//www.aliexpress.com">全球速卖通</a>
                    <b>|</b>
                    <a href="//www.taobao.com">淘宝网</a>
                    <b>|</b>
                    <a href="//www.tmall.com">天猫</a>
                    <b>|</b>
                    <a href="//ju.taobao.com">聚划算</a>
                    <b>|</b>
                    <a href="//www.etao.com">一淘</a>
                    <b>|</b>
                    <a href="//www.alimama.com">阿里妈妈</a>
                    <b>|</b>
                    <a href="//www.aliyun.com">阿里云计算</a>
                    <b>|</b>
                    <a href="//www.yunos.com">云OS</a>
                    <b>|</b>
                    <a href="//wanwang.aliyun.com">万网</a>
                    <b>|</b>
                    <a href="//www.alipay.com">支付宝</a>
                </p>
            </div>
            <div class="footer-bd">
                <p>
                    <a href="//huodong.taobao.com/wow/tbhome/act/about-home">关于淘宝</a>
                    <a href="//www.taobao.com/about/partners.php">合作伙伴</a>
                    <a href="//pro.taobao.com">营销中心</a>
                    <a href="//service.taobao.com/support/main/service_route.htm">联系客服</a>
                    <a href="//open.taobao.com">开放平台</a>
                    <a href="//www.taobao.com/about/join.php">诚征英才</a>
                    <a href="//consumerservice.taobao.com/contact-us">联系我们</a>
                    <a href="//www.taobao.com/sitemap.php">网站地图</a>
                    <a href="//terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html">法律声明及隐私权政策</a>
                    <em>&copy; 2022 Taobao.com 版权所有</em>
                </p>
                <p>
                    <span>网络文化经营许可证：<a
                            href="//img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg">文网文[2010]040号</a></span>
                    <b>|</b>
                    <span>增值电信业务经营许可证：浙B2-20080224-1</span>
                    <b>|</b>
                    <span>信息网络传播视听节目许可证：1109364号</span>
                </p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                username: "",
                password: "",
                isPasswordLogin: "1",
                cities: [{
                    value: '中国大陆',
                    label: '+86'
                }, {
                    value: '中国香港',
                    label: '+852'
                }, {
                    value: '中国澳门',
                    label: '+853'
                }, {
                    value: '中国台湾',
                    label: '+886'
                }, {
                    value: '韩国',
                    label: '+82'
                }, {
                    value: '日本',
                    label: '+81'
                }, {
                    value: '美国',
                    label: '+1'
                }, {
                    value: '加拿大',
                    label: '+1'
                }, {
                    value: '英国',
                    label: '+44'
                }],
                value: '中国大陆'
            }
        },
        methods: {
            handleSelect(index, indexPath) {
                this.isPasswordLogin = index == 1;
            }
        }
    })
</script>
</html>